<script setup lang="ts">
import type {ButtonVariants} from '../../ui';
import type {JcxButtonProps} from './button';

import {computed, useSlots} from 'vue';

import {cn} from '@/utils/shared/utils';

import {JcxTooltip} from '../tooltip';
import JcxButton from './button.vue';

interface Props extends JcxButtonProps {
  class?: any;
  disabled?: boolean;
  onClick?: () => void;
  tooltip?: string;
  tooltipDelayDuration?: number;
  tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
  variant?: ButtonVariants;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  onClick: () => {
  },
  tooltipDelayDuration: 200,
  tooltipSide: 'bottom',
  variant: 'icon',
});

const slots = useSlots();

const showTooltip = computed(() => !!slots.tooltip || !!props.tooltip);
</script>

<template>
  <JcxButton
      v-if="!showTooltip"
      :class="cn('rounded-full', props.class)"
      :disabled="disabled"
      :variant="variant"
      size="icon"
      @click="onClick"
  >
    <slot></slot>
  </JcxButton>

  <JcxTooltip
      v-else
      :delay-duration="tooltipDelayDuration"
      :side="tooltipSide"
  >
    <template #trigger>
      <JcxButton
          :class="cn('rounded-full', props.class)"
          :disabled="disabled"
          :variant="variant"
          size="icon"
          @click="onClick"
      >
        <slot></slot>
      </JcxButton>
    </template>
    <slot v-if="slots.tooltip" name="tooltip"></slot>
    <template v-else>
      {{ tooltip }}
    </template>
  </JcxTooltip>
</template>
